<template>
  <div class="row10">
    <div class="box">
      <!-- 这个盒子是用来放下拉选择框的 -->
      <div class="col_1 echarts" id="row10_col_1"></div>
    </div>
    <div class="box">
      <div class="col_2 echarts" id="row10_col_2"></div>
    </div>
    <div class="box">
      <div class="col_3 echarts" id="row10_col_3"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "row10",
  // 数据
  data() {
    return {};
  },
  // 页面加载就执行
  mounted() {
    this.getCol10_1(
      document.querySelector("#row10_col_1"),
      "10.1行业性质-注册"
    );
    this.getCol10_2(
      document.querySelector("#row10_col_2"),
      "10.2行业性质-发布"
    );
    this.getCol10_3(
      document.querySelector("#row10_col_3"),
      "10.3行业性质-行业折线图"
    );
  },
  // 监听器 监听数据变化
  watch: {},
  // 方法
  methods: {
    // 10.1
    async getCol10_1(domName, title) {
      const { data: res } = await this.$http.get(
        "http://172.16.1.170:8080/cxdsj/dsjAction.hyxzzcSelect.do"
      );
      // console.log('10.1', res);
      let str = res.substring(5);
      let hyxzZc = eval("(" + str + ")");
      const myChart = echarts.init(domName);
      var img = "/asset/get/s/data-1579066527025-wc4FnTXT.png";
      var option = {
        title: {
          text: title,
          textStyle: {
            color: "#8fc4ff",
            fontsize: "20px",
            fontweight: "bolder",
            fontStyle: "normal",
          },
          top: "3%",
          left: "center",
        },
        // backgroundColor: '#00265f',
        color: [
          new echarts.graphic.LinearGradient(
            0,
            0,
            1,
            0,
            [
              {
                offset: 0,
                color: "#474cc9",
              },
              {
                offset: 1,
                color: "#1b93d7",
              },
            ],
            false
          ),
        ],
        toolbox: {
          feature: {
            // saveAsImage: { show: true }, // 导出图片
            myFull: {
              // 全屏
              show: true,
              title: "全屏",
              icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
              onclick: () => {
                // 全屏查看
                if (domName.requestFullScreen) {
                  // HTML W3C 提议
                  domName.requestFullScreen();
                } else if (domName.msRequestFullscreen) {
                  // IE11
                  domName.msRequestFullScreen();
                } else if (domName.webkitRequestFullScreen) {
                  // Webkit
                  domName.webkitRequestFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  // Firefox
                  domName.mozRequestFullScreen();
                }
                // 退出全屏
                if (domName.requestFullScreen) {
                  document.exitFullscreen();
                } else if (domName.msRequestFullScreen) {
                  document.msExitFullscreen();
                } else if (domName.webkitRequestFullScreen) {
                  document.webkitCancelFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  document.mozCancelFullScreen();
                }
              },
            },
          },
        },
        grid: {
          left: "2%",
          right: "10%",
          top: "20%",
          bottom: "5%",
          containLabel: true,
        },
        tooltip: {
          show: "true",
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        yAxis: {
          // data: ["高危行业","重点行业", "一般行业", "规模以上行业", "人口密集场所", "其他"],
          data: hyxzZc.map((item) => {
            return item.name;
          }),
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            color: "#fff",
            fontSize: 13,
          },
        },
        xAxis: [
          {
            axisTick: {
              show: false,
            },
            type: "value",
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            // name: '',
            type: "bar",
            barWidth: 20,
            label: {
              normal: {
                show: true,
                position: "right",
                textStyle: {
                  color: "#9fceff",
                  fontSize: 14,
                },
              },
            },
            // data: [50, 60, 70, 80,90,100]
            data: hyxzZc.map((item) => {
              return item.value;
            }),
          },
        ],
      };
      // 3.把配置项给实例对象
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 10.2
    async getCol10_2(domName, title) {
      const { data: res } = await this.$http.get(
        "http://172.16.1.170:8080/cxdsj/dsjAction.hyxzdjfbSelect.do"
      );
      // console.log('10.2', res);
      let str = res.substring(5);
      let hyxzPd = eval("(" + str + ")");
      const myChart = echarts.init(domName);
      var option = {
        title: {
          text: title,
          textStyle: {
            color: "#ffffff",
            fontsize: "20px",
            fontweight: "bolder",
            fontStyle: "normal",
          },
          top: "3%",
          left: "center",
        },
        // backgroundColor: '#273454',
        color: ["#cd4692", "#9658c3", "#6c6be2", "#01aebf", "#18b794"],
        toolbox: {
          feature: {
            // saveAsImage: { show: true }, // 导出图片
            myFull: {
              // 全屏
              show: true,
              title: "全屏",
              icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
              onclick: () => {
                // 全屏查看
                if (domName.requestFullScreen) {
                  // HTML W3C 提议
                  domName.requestFullScreen();
                } else if (domName.msRequestFullscreen) {
                  // IE11
                  domName.msRequestFullScreen();
                } else if (domName.webkitRequestFullScreen) {
                  // Webkit
                  domName.webkitRequestFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  // Firefox
                  domName.mozRequestFullScreen();
                }
                // 退出全屏
                if (domName.requestFullScreen) {
                  document.exitFullscreen();
                } else if (domName.msRequestFullScreen) {
                  document.msExitFullscreen();
                } else if (domName.webkitRequestFullScreen) {
                  document.webkitCancelFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  document.mozCancelFullScreen();
                }
              },
            },
          },
        },
        tooltip: {
          trigger: "item",
          // formatter: "{a} <br/>{b} : {c}$ ({d}%)",
          textStyle: {
            fontSize: 16,
          },
        },
        // legend: {
        //     // data: ['A', 'B', 'C', 'D', 'E'],
        //     orient: 'vertical',
        //     right: '5%',
        //     top: '5%',
        //     itemWidth: 30,
        //     itemHeight: 30,
        //     itemGap: 30,
        //     textStyle: {
        //         color: '#',
        //         fontSize: 16,
        //     },
        // },
        series: [
          {
            // name: '注册',
            type: "pie",
            clockwise: false,
            startAngle: 90,
            radius: "70%",
            center: ["50%", "60%"],
            hoverAnimation: false,
            roseType: "radius", //area
            // data: [{
            //         value: 335,
            //         name: '高危行业'
            //     },
            //     {
            //         value: 310,
            //         name: '重点行业'
            //     },
            //     {
            //         value: 234,
            //         name: '一般行业'
            //     },
            //     {
            //         value: 135,
            //         name: '规模以上行业'
            //     },
            //     {
            //         value: 148,
            //         name: '人口密集场所'
            //     },
            //      {
            //         value: 100,
            //         name: '其他'
            //     }
            // ],
            data: hyxzPd,
            itemStyle: {
              normal: {
                borderColor: "#273454",
                borderWidth: "3",
              },
            },
            label: {
              show: true,
              position: "outside",
              // formatter: '{a|{b}：{d}%}\n{hr|}',
              formatter: "{b}: {c}",
              color: "#ffff",
              // fontsize: 15
              // rich: {
              //   hr: {
              //     // backgroundColor: "t",
              //     borderRadius: 100,
              //     width: 0,
              //     height: 10,
              //     // padding: [3, 3, 0, -16],
              //     // shadowColor: "#1c1b3a",
              //     // shadowBlur: 1,
              //     // shadowOffsetX: "0",
              //     // shadowOffsetY: "2",
              //   },
              //   a: {
              //     padding: [-35, 15, -20, 5],
              //   },
              // },
            },
            labelLine: {
              normal: {
                length: 20,
                length2: 30,
                lineStyle: {
                  width: 1,
                },
              },
            },
            // label: {
            //     normal: {
            //         show: true,
            //         position: 'inside',
            //         formatter: '{d}%',
            //         formatter: function(data){
            //             return data.percent.toFixed(0)+"%";
            //         },
            //         textStyle : {
            //             align : 'center',
            //             baseline : 'middle',
            //             fontFamily : '微软雅黑',
            //             fontSize : 15,
            //             fontWeight : 'bolder'
            //         }
            //     },
            // },
          },
        ],
      };
      // 3.把配置项给实例对象
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 10.3
    async getCol10_3(domName, title) {
      const { data: res } = await this.$http.get(
        "http://172.16.1.170:8080/cxdsj/dsjAction.hyxzdjfbhySelect.do"
      );
      // console.log('10.3', res);
      let str = res.substring(5);
      let hyxzHy = eval("(" + str + ")");
      const myChart = echarts.init(domName);
      var option = {
        title: {
          text: title,
          textStyle: {
            color: "#8fc4ff",
            fontsize: "20px",
            fontweight: "bolder",
            fontStyle: "normal",
          },
          top: "3%",
          left: "center",
        },
        toolbox: {
          feature: {
            // saveAsImage: { show: true }, // 导出图片
            myFull: {
              // 全屏
              show: true,
              title: "全屏",
              icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
              onclick: () => {
                // 全屏查看
                if (domName.requestFullScreen) {
                  // HTML W3C 提议
                  domName.requestFullScreen();
                } else if (domName.msRequestFullscreen) {
                  // IE11
                  domName.msRequestFullScreen();
                } else if (domName.webkitRequestFullScreen) {
                  // Webkit
                  domName.webkitRequestFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  // Firefox
                  domName.mozRequestFullScreen();
                }
                // 退出全屏
                if (domName.requestFullScreen) {
                  document.exitFullscreen();
                } else if (domName.msRequestFullScreen) {
                  document.msExitFullscreen();
                } else if (domName.webkitRequestFullScreen) {
                  document.webkitCancelFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  document.mozCancelFullScreen();
                }
              },
            },
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: "13%",
          right: "10%",
          type: "plain",
          textStyle: {
            color: "#ccc",
          },
        },
        grid: {
          top: "30%",
          left: "0%",
          right: "3%",
          bottom: "15%",
          containLabel: true,
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          type: "category",
          boundaryGap: false,
          // data: ['机械', '纺织', '煤矿', '危险化学品', '轻工', '石油天然气', '烟花爆竹', '有色', '烟草', '建材', '金属非金属矿山和尾矿库', '商贸', '冶金', '其他'],
          data: hyxzHy.map((item) => {
            return item.trad;
          }),
          axisLabel: {
            textStyle: {
              color: "#fff",
              fontSize: 11,
            },
            interval: "0",
          },
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
          axisTick: {
            show: false,
          },
        },
        // 滚动条
        dataZoom: [
          {
            show: true,
            height: 12,
            xAxisIndex: [0],
            bottom: "5%",
            start: 0,
            end: 40,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: {
              color: "#d3dee5",
            },
            textStyle: {
              color: "#fff",
            },
            borderColor: "#90979c",
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],
        color: [
          "#4ec19e",
          "#ca8c13",
          "#a3037f",
          "#3d62ce",
          "#1d90d7",
          "#3fbba9",
        ],
        series: [
          {
            name: "高危行业",
            type: "line",
            stack: "Total",
            // data: [120, 132, 101, 134, 90, 230, 210, 150, 263, 145, 156, 230, 126, 189]
            data: hyxzHy.map((item) => {
              return item.gaoweiHy;
            }),
          },
          {
            name: "重点行业",
            type: "line",
            stack: "Total",
            // data: [220, 282, 201, 234, 290, 430, 410, 120, 132, 101, 134, 90, 230, 210]
            data: hyxzHy.map((item) => {
              return item.zhongdianHy;
            }),
          },
          {
            name: "一般行业",
            type: "line",
            stack: "Total",
            // data: [450, 432, 401, 454, 590, 530, 510, 220, 282, 201, 234, 290, 430, 410]
            data: hyxzHy.map((item) => {
              return item.yibanHy;
            }),
          },
          {
            name: "规模以上行业",
            type: "line",
            stack: "Total",
            // data: [120, 132, 101, 134, 90, 230, 210, 450, 432, 401, 454, 590, 530, 510]
            data: hyxzHy.map((item) => {
              return item.guimoHy;
            }),
          },
          {
            name: "人口密集场所",
            type: "line",
            stack: "Total",
            // data: [220, 282, 201, 234, 290, 430, 410, 120, 132, 101, 134, 90, 230, 210]
            data: hyxzHy.map((item) => {
              return item.renkouMj;
            }),
          },
          {
            name: "其他",
            type: "line",
            stack: "Total",
            // data: [450, 432, 401, 454, 590, 530, 510, 132, 101, 134, 90, 230, 210, 450]
            data: hyxzHy.map((item) => {
              return item.qitaHy;
            }),
          },
        ],
      };
      // 3.把配置项给实例对象
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.row10 {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  height: 350px;
  .box {
    // flex: 3.5;
    position: relative;
    height: 100%;
    width: 30%;
    border: 1px solid #1480f0;
    &:nth-child(2) {
      width: 39%;
      border: 1px solid #1480f0;
    }

    & /deep/ .el-input__inner {
      background-color: transparent !important;
      max-width: 120px !important;
      max-height: 30px !important;
      color: #fff;
    }

    .echarts {
      position: relative;
      padding: 10px !important;
      height: 100%;
      width: 100%;

      // & /deep/ canvas {
      //   //background-color: #333;
      // }
    }

    &:nth-child(2n - 1) {
      border: 1px solid rgba(25, 186, 139, 0.17);
      background: #050d4b url(@/static/images/line_1.png);
      padding: 0 0.1875rem 0.1875rem;
      margin-bottom: 0.1875rem;
      flex-direction: column;
      justify-content: space-between;
    }
    &:first-child {
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 10px;
        height: 10px;
        border-left: 2px solid #02a6b5;
        border-top: 2px solid #02a6b5;
        content: "";
      }
      &::after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 10px;
        height: 10px;
        border-left: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }
    }
    &:last-child {
      &::before {
        position: absolute;
        top: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-top: 2px solid #02a6b5;
        content: "";
      }
      &::after {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }
    }
  }
}
</style>